<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名系统</title>
    <link rel="stylesheet" href="./css/main.css">
</head>

<body>
    <div id="app">
        <div class="main-area">
            <h3>点名系统</h3>
            <table>
                <tbody>
                    <tr v-for="row in students">
                        <td v-for="student in row" :class="{teacher:!student.isStu,leader:student.isLeader,selected:selectNum===student.id,sp:spCur===student.id}">{{student.name}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="operater-area">
            <button @click="pickStu">点名</button>
            <button @click="reverse">反转</button>
            <button @click="showOrNot">显示</button>
        </div>
        <div class="show-area" v-show="display">
            <ul>
                <template v-for="rows in students">
                    <li v-for="student in rows" v-if="student.isSp" @mouseenter="link(student.id)" @mouseleave="disLink">
                        <span>学生ID：{{student.id}}&nbsp;|&nbsp;</span>
                        <span>学生姓名：{{student.name}}&nbsp;|&nbsp;</span>
                        <span>情况：{{student.desp}}</span>
                    </li>
                </template>
            </ul>
        </div>
    </div>
</body>
<script src="./js/lib/vue.js"></script>
<script src="./js/main.js"></script>

</html>